<template>
  <div>
    <van-nav-bar title="在线充值" left-text="首页" right-text="退出" @click-left="onClickLeft" @click-right="onClickRight"/>
    <van-form @submit="onSubmit">
      <van-field
        v-model="infoObj.mobile"
        name="手机号"
        label="车主手机号"
        placeholder="手机号"
        input-align="right"
        readonly
      />
      <van-field  v-for="(item,index) in infoObj.accountCarPlateInfoDTOS" :key="index"
        v-model="item.carPlateNo"
        name=""
        :label="index > 0 ? '' : '车牌号码'"
        placeholder=""
        input-align="right"
        readonly
      />
      <van-field
        v-model="infoObj.name"
        name="姓名"
        label="车主姓名"
        placeholder="姓名"
        input-align="right"
        readonly
      />
      <van-field
        class="money"
        v-model="infoObj.balance"
        name="当前余额"
        label="当前余额"
        placeholder="当前余额"
        input-align="right"
        readonly
      />
      <van-field
        class="money"
        readonly
        clickable
        name="picker"
        :value="moneyObj.amount"
        label="充值余额"
        placeholder="请选择充值余额"
        input-align="right"
        style="color:red"
      />
      <van-field
        class="money"
        v-model="moneyObj.cashBackAmount"
        name="充值返现"
        label="充值返现"
        placeholder="充值返现"
        input-align="right"
        style="color:red"
        readonly
      />
      <van-row gutter="20" v-for="(item,index) in columns" :key="'b'+index" style="margin: 16px;">
        <van-col span="8" v-for="(itemObj,indexObj) in item" :key="'a'+indexObj">
          <span class="span-button" :style="{color:itemObj.flag ? '#fff' : '',backgroundColor:itemObj.flag ? '#1989fa' : ''}" @click="moneyTop(itemObj)">{{itemObj.amount}}元</span>
        </van-col>
      </van-row>
      <div style="margin: 16px;">
        <van-button block type="info" native-type="submit" @click="payWx">立即支付</van-button>
      </div>
    </van-form>
  </div>
</template>
<script>
export default {
  data(){
    return{
      value:'',
      columns: [],
      showPicker: false,
      infoObj:{},
      moneyObj:{
        id: '',
        amount:'',
        cashBackAmount:''
      }
    }
  },
  mounted(){
    this.getInfor()
  },
  methods:{
    // 获取用户信息
    getInfor(){
      this.$api.inforApi().then(resp=>{
        if(resp.code == 0){
          this.infoObj = resp.accountInfo
          this.getAllsetsApi()
        }else{
          this.$toast(resp.msg)
        }
      })
    },
    // 获取套餐
    getAllsetsApi(){
      this.$api.allsetsApi().then(resp=>{
        if(resp.code == 0){
          resp.allSet.forEach(e => {
            e.flag = false
          });
          let arr = []
          for(let i = 0; i < resp.allSet.length; i = i + 3){
            arr.push(resp.allSet.slice(i,i+3))
          }
          this.columns = arr
        }else{
          this.$toast(resp.msg)
        }
      })
    },
    moneyTop(item){
      item.flag = true
      this.columns.forEach(e=>{
        e.forEach(b=>{
          if(b.id == item.id){
            this.moneyObj = b
            b.flag = true
          }else{
            b.flag = false
          }
        })
      })
    },
    onSubmit(){},
     onClickLeft() {
       this.$router.push({
        name:'index'
      })
    },
    onClickRight() {
      if(localStorage.getItem('token')){
        this.$api.logout().then(resp=>{
          if(resp.code == 0){
            localStorage.removeItem('openId')
            localStorage.removeItem('token')
            this.$router.push({
              name:'login'
            })
          }
        })
      }else{
        this.$router.push({
          name:'login'
        })
      }
    },
    onConfirm(value) {
      this.moneyObj = value
      this.value = value;
      this.showPicker = false;
    },
    payWx(){
      let parmes = {
        openId: this.$route.query.openId ? this.$route.query.openId : localStorage.getItem('openId'),
        topupSetId: this.moneyObj.id
      },self = this
      this.$api.postwxpay(parmes).then(resp=>{
        if(resp.code == 0){
          WeixinJSBridge.invoke(
            'getBrandWCPayRequest',resp.orderPayInfo,
            (res)=>{
                if(res.err_msg == "get_brand_wcpay_request:ok" ){
                    self.$toast('支付成功')
                    self.$router.push({
                      name:'infor'
                    })
                }else{
                    self.$toast('支付失败')
                }
            }
        )
        }else{
          this.$toast(resp.msg)
        }
      })
    }
  }
}
</script>
